<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style media="(min-device-width: 1000px)">
*{
    margin: 0;
    padding:0;
    background-color: #f5f5f5;
}
#layout{
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
}
#top{
    width:100%;
    flex: 0 0 50px;
    margin:0 auto;
    background-color: yellow;
}
#main{
    flex: 0 0 100%;
    display: flex;
}
#main div:nth-child(1){
    flex:  0 0 10%;
    background-color: #f5f5f5;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
#main div:nth-child(1) li{
    flex: 0 0 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-bottom:1px solid white ;
}
#main div:nth-child(2){
    flex:  0 0 90%;
    background-color: #f5f5f5;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#main div:nth-child(2) li{
    flex: 0 0 30%;
    height: 120px;
    text-align: center;
    background-color: yellow;
    margin-top:10px ;
}
</style>
<style media="(min-device-width: 400px) and (max-device-width:600px)">

</style>
<body>
    <div id="layout">
        <div id="top"></div>
        <div id="main">
            <div>
                <li>分类1</li>
                <li>分类2</li>
                <li>分类3</li>
                <li>分类4</li>
                <li>分类5</li>
                <li>分类6</li>
            </div>
            <div>
                <li>图片</li>
                <li>图片</li>
                <li>图片</li>
                <li>图片</li>
                <li>图片</li>
                <li>图片</li>
                <li>图片</li>
                <li>图片</li>
            </div>
        </div>
    </div>
</body>
</html>